<template>
  <div class="main-content-box">
    <div id="topoDemo"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'g6demo5',
  data () {
    return {
      /* demoData: {
        nodes: [
          {
            id: 'root',
            label: 'WIN -STARTNODE',
            text: '\ue600',
            style: {
              fill: 'red',
            },
            labelCfg: {
              style: {
                fill: 'red',
              },
            },
            backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
            size: 30,
          },
          {
            id: 'idr1',
            label: 'R1',
            text: '\ue679',
            relation: '9ms',

          },
          {
            id: 'idr2',
            label: 'R2',
            text: '\ue679',
            relation: '9ms',

          },
          {
            id: 'idr3',
            label: 'R3',
            text: '\ue679',
            relation: '19ms',
          },
          {
            id: 'idr5',
            label: 'R5',
            text: '\ue679',
            relation: '18ms',

          },
          {
            id: 'idr8',
            label: 'R8',
            text: '\ue679',
            relation: '17ms',

          },
          {
            id: 'idr9',
            label: 'R9',
            text: '\ue679',
            relation: '17ms',

          },
        ],
        edges: [
          {
            type: 'cubic-horizontal',
            source: 'root',
            target: 'idr2'
          },
          {
            type: 'cubic-horizontal',
            source: 'idr2',
            target: 'idr1'
          },
          {
            type: 'cubic-horizontal',
            source: 'idr2',
            target: 'idr3'
          },
          {
            type: 'cubic-horizontal',
            source: 'idr2',
            target: 'idr5'
          },
          {
            type: 'cubic-horizontal',
            source: 'idr5',
            target: 'idr8'
          },
          {
            type: 'cubic-horizontal',
            source: 'idr8',
            target: 'idr9'
          },

        ]
      } */

      demoData: {
        isRoot: true,
        id: 'Root',
        label: 'WIN -STARTNODE',
        text: '\ue600', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。
        style: {
          fill: 'red',
        },
        labelCfg: {
          style: {
            fill: 'red',
          },
        },
        backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
        size: 30,
        children: [
          {
            id: 'SubTreeNode1',
            label: 'R2',
            text: '\ue679',
            relation: '9ms',
            anchorPoints: [
              [1, 0.5]
            ],
            children: [
              {
                id: 'SubTreeNode2',
                label: 'R1',
                text: '\ue679',
                relation: '19ms',
                anchorPoints: [
                  [0, 0.5]
                ],
                backgroundConfig: {
                  fill: '#5B8FF9',
                },
                style: {
                  fill: '#fff',
                },
                labelCfg: {
                  style: {
                    fill: '#5B8FF9',
                  },
                },
              },
              {
                id: 'id1',
                label: 'R5',
                text: '\ue679',
                relation: '15ms',
                backgroundConfig: {
                  fill: 'green',
                },
                style: {
                  fill: '#fff',
                },
                labelCfg: {
                  style: {
                    fill: 'green',
                  },
                },
                children: [
                  {
                    id: 'SubTreeNode1.2.1',
                    label: 'R8',
                    text: '\ue679',
                    relation: '7ms',
                    backgroundConfig: {
                      fill: 'cyan',
                    },
                    style: {
                      fill: '#fff',
                    },
                    labelCfg: {
                      style: {
                        fill: 'cyan',
                      },
                    },
                    children: [
                      {
                        id: 'SubTreeNode4',
                        label: 'R9',
                        relation: '19ms',
                        text: '\ue679',
                      },
                    ]
                  },
                ],
              },
              {
                id: 'SubTreeNode3',
                label: 'R3',
                text: '\ue679',
                relation: '11ms',
                backgroundConfig: {
                  fill: 'Coral',
                },
                style: {
                  fill: '#fff',
                },
                labelCfg: {
                  style: {
                    fill: 'Coral',
                  },
                },
              }
            ],
          },
        ],
      },
      demoData1: {
        nodes: [
          {
            isRoot: true,
            id: 'Root',
            label: '金科状元李寻欢',
            text: '\ue600', // 对应iconfont.css 里面的content，注意加u，后面的自行修改一下。
            style: {
              fill: 'red',
            },
            labelCfg: {
              style: {
                fill: 'red',
              },
            },
            backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
            size: 30,
            anchorPoints: [
              [1, 0.5]
            ],
            children: [
              {
                id: 'SubTreeNode1',
                label: '**网咖',
                text: '\ue679',
                relation: '上网',
                children: [
                  {
                    id: 'SubTreeNode2',
                    label: '多伦多',
                    text: '\ue679',
                  },
                  {
                    id: 'id1',
                    label: '小王',
                    text: '\ue679',
                    children: [
                      {
                        id: 'SubTreeNode1.2.2',
                        label: '182****2123',
                        text: '\ue679',
                      },
                      {
                        id: 'SubTreeNode4',
                        label: '今晚在吗',
                        text: '\ue679',
                      },
                    ],
                  },
                ],
              },
              {
                id: 'SubTreeNode5',
                label: '小花',
                relation: '老婆',
                text: '\ue679',
                backgroundConfig: {
                  fill: 'Coral',
                },
                style: {
                  fill: '#fff',
                },
                labelCfg: {
                  style: {
                    fill: 'Coral',
                  },
                },
                children: [
                  {
                    id: 'SubTreeNode1.2.1',
                    label: 'tel 400-800',
                    text: '\ue679',
                    relation: '通话',
                    backgroundConfig: {
                      fill: 'Coral',
                    },
                    style: {
                      fill: '#fff',
                    },
                    labelCfg: {
                      style: {
                        fill: 'Coral',
                      },
                    },
                  },
                  {
                    id: 'SubTreeNode3.3',
                    label: '凶器',
                    text: '\ue679',
                    relation: '指纹',
                    backgroundConfig: {
                      fill: 'Coral',
                    },
                    style: {
                      fill: '#fff',
                    },
                    labelCfg: {
                      style: {
                        fill: 'Coral',
                      },
                    },
                    anchorPoints: [
                      [0, 0.5],
                      [0.5, 0.5]
                    ],
                    source: 'SubTreeNode3.3',
                    target: 'SubTreeNode6',
                    // 该边连入 source 点的第 0 个 anchorPoint，
                    sourceAnchor: 1,
                    // 该边连入 target 点的第 0 个 anchorPoint，
                    targetAnchor: 1,

                  },
                ],
              },
              {
                id: 'SubTreeNode6',
                label: '马航37*',
                relation: '乘坐',
                text: '\ue679',
                // children: [
                //   {
                //     id: 'SubTreeNode3.3',
                //     label: '凶器',
                //     text: '\ue679',
                //     relation: '指纹',
                //     backgroundConfig: {
                //       fill: 'Coral',
                //     },
                //     style: {
                //       fill: '#fff',
                //     },
                //     labelCfg: {
                //       style: {
                //         fill: 'Coral',
                //       },
                //     }
                //   }
                // ]
                // linkPoints: {
                //   left: true
                // },
                anchorPoints: [
                  [0, 0.5],
                  [1, 0.5]
                ],
                source: 'SubTreeNode6',
                target: 'SubTreeNode3.3',
                // 该边连入 source 点的第 0 个 anchorPoint，
                sourceAnchor: 1,
                // 该边连入 target 点的第 0 个 anchorPoint，
                targetAnchor: 1,

              },
            ],
          }
        ]
      },
      edges: [
        {
          id: 'edge0',
          source: 'SubTreeNode6',
          target: 'SubTreeNode3.3',
          label: 'curveOffset = 20',
          curveOffset: 20,
        },
        {
          id: 'edge1',
          source: 'SubTreeNode6',
          target: 'SubTreeNode3.3',
          label: 'curveOffset = 20',
          curveOffset: 30,
        },
        {
          id: 'edge2',
          source: 'SubTreeNode6',
          target: 'SubTreeNode3.3',
          label: 'curveOffset = 20',
          curveOffset: 50,
        },
      ]
    }
  },
  mounted () {
    this.initGrahp()
  },
  methods: {
    initGrahp () {
      //使用iconfont
      G6.registerNode('iconfont', {
        draw (cfg, group) {
          const { backgroundConfig: backgroundStyle, style, labelCfg: labelStyle } = cfg;

          if (backgroundStyle) {
            group.addShape('circle', {
              attrs: {
                x: 0,
                y: 0,
                r: cfg.size,
                ...backgroundStyle,
              },
              name: 'circle-shape',
            });
          }

          group.addShape('circle', {
            attrs: {
              x: -12,
              y: 0,
              r: 3,
              ...backgroundStyle,
            },
            name: 'circle-shape',
          });

          const keyShape = group.addShape('text', {
            attrs: {
              x: 0,
              y: 0,
              fontFamily: 'iconfont', // 对应css里面的font-family: "iconfont";
              textAlign: 'center',
              textBaseline: 'middle',
              text: cfg.text,
              fontSize: cfg.size,
              ...style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape1',
          });
          const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

          group.addShape('text', {
            attrs: {
              x: 0,
              y: labelY,
              textAlign: 'center',
              text: cfg.label,
              ...labelStyle.style,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: 'text-shape1',
          });
          return keyShape;
        },
      });

      G6.registerEdge(
        'circle-running',
        {
          afterDraw (cfg, group) {
            // 获得当前边的第一个图形，这里是边本身的 path
            const shape = group.get('children')[0];
            // 边 path 的起点位置
            const startPoint = shape.getPoint(0);

            // 添加红色 circle 图形
            const circle = group.addShape('circle', {
              attrs: {
                x: startPoint.x,
                y: startPoint.y,
                fill: '#1890ff',
                r: 3,
              },
              name: 'circle-shape',
            });

            // 对红色圆点添加动画
            circle.animate(
              ratio => {
                // 每一帧的操作，入参 ratio：这一帧的比例值（Number）。返回值：这一帧需要变化的参数集（Object）。
                // 根据比例值，获得在边 path 上对应比例的位置。
                const tmpPoint = shape.getPoint(ratio);
                // 返回需要变化的参数集，这里返回了位置 x 和 y
                return {
                  x: tmpPoint.x,
                  y: tmpPoint.y,
                };
              },
              {
                repeat: true, // 动画重复
                duration: 3000, // 一次动画的时间长度
              },
            );
          },
        },
        'cubic',
      );

      const COLOR = '#40a9ff';
      let width = document.getElementById('topoDemo').scrollWidth * 0.8
      let height = document.getElementById('topoDemo').scrollHeight || 600
      const graph = new G6.TreeGraph({
        container: 'topoDemo',
        width,
        height,
        modes: {
          default: ['collapse-expand', 'drag-canvas', 'drag-node'],
        },
        defaultNode: {
          backgroundConfig: {
            backgroundType: 'circle',
            fill: COLOR,
            stroke: 'LightSkyBlue',
          },
          type: 'iconfont',
          size: 12,
          style: {
            fill: '#fff',
          },
          labelCfg: {
            style: {
              fill: COLOR,
              fontSize: 12,
            },
          },
          linkPoints: {
            top: true,
            bottom: true,
            left: true,
            right: true,
            fill: '#fff',
            size: 5
          }
        },
        // 布局相关
        layout: {
          type: 'compactBox',
          direction: 'LR',
          getId (d) {
            return d.id;
          },
          getHeight () {
            return 26;
          },
          getWidth () {
            return 26;
          },
          getVGap () {
            return 20;
          },
          getHGap () {
            return 60;
          },
        },
      });

      graph.edge(({ target }) => {
        const fill = target.get('model').backgroundConfig && target.get('model').backgroundConfig.fill;
        return {
          type: 'cubic-horizontal',
          color: fill || COLOR,
          label: target.get('model').relation || '',
          labelCfg: {
            style: {
              fill: fill || COLOR,
              fontSize: 12,
            },
          },
        };
      });


      graph.data(this.demoData1.nodes[0]);
      graph.render();
      graph.fitView();
    }
  }
}
</script>

<style scoped>
</style>